<template>
  <div>
    <a-card style="height: 95vh"  size="small">
    <a-row class="yy-Row">
        <!-- 查询条件 -->
        <a-form-model
            layout="inline"
            :model="queryForm"
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
        >
          <a-row>
            <a-col :span="6">
<!--              <a-form-model-item :label="$t('menuItem.CarrierId')" >-->
<!--                <a-input-->
<!--                    v-model="queryForm.crrId"-->
<!--                    allowClear-->
<!--                    :placeholder="$t('menuItem.CarrierIdWarn')"-->
<!--                />-->
<!--              </a-form-model-item>-->
              <a-form-model-item :label="$t('btn.lotId')" >
                <a-input v-model="queryForm.lotIdLike" @keyup.enter.native="queryClickFunc"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item :label="$t('lotState')" >
                <a-select
                    v-model="queryForm.state"
                    show-search
                    :placeholder="$t('stateWarn')"
                    showArrow
                    allowClear
                >
                  <a-select-option key="Hold">Hold</a-select-option>
                  <a-select-option key="non-Hold">non-Hold</a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="6">
              <a-form-model-item :label="$t('btn.carrierId')" >
                <a-input v-model="queryForm.carierIdLike" @change="queryClickFunc"/>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </a-row>
      <!-- 按钮 -->
      <a-row class="yy-Row">
        <a-col :span="4">
          <a-space>
            <a-button type="primary" v-has="'btn_PackagingSummary_query'" @click="queryClickFunc">{{$t('menuItem.QueryUser')}}
            </a-button>
            <a-button type="primary" v-has="'btn_PackagingSummary_clean'" @click="cleanPackagingSummary">{{$t('btn.cleanAll')}}
            </a-button>
          </a-space>
        </a-col>
      </a-row>
      <!-- table展示 -->
      <a-row  :gutter="20">
        <a-col :span="20">
          <m-table
              :columns="columns"
              :dataSource="dataSource"
              :loading="loadTable"
              :row-click="customRowTest"
              bordered
              :rowKey="(record,index)=>{return index}"
              :pagination=dataPagination
              @change="tableChange"
          >
            <template slot="lotId" slot-scope="text, record" v-if="!record.isEmpty">
              <a @click="clickCell(record)">{{record.lotId}}</a>
            </template>
            <template slot="result" slot-scope="text, record" v-if="!record.isEmpty">
              <a-tag v-if="record.result == 'P'"  color="green" >{{"P"}}</a-tag>
              <a-tag v-if="record.result == 'F'"   color="red" >{{"F"}}</a-tag>
            </template>
          </m-table>
        </a-col>
        <a-col :span="4">
          <a-table
                  size="small"
              :columns="columns2"
              :dataSource="dataSource2"
              :loading="loadTable"
              bordered
              :rowKey="(record,index)=>{return index}"
              :scroll="{y:windowHeight - 300 }"
              :pagination="false"
          >
            <template slot="ymsResult" slot-scope="text, record">
              <a-tag v-if="record.ymsResult == '0'"  color="green" >{{"P"}}</a-tag>
              <a-tag v-if="record.ymsResult == '1'"   color="red" >{{"F"}}</a-tag>
            </template>
          </a-table>
        </a-col>
      </a-row>
    </a-card>

    <!-- 绑定弹窗 -->
<!--    <w-a-t-summary-report></w-a-t-summary-report>-->
<!--    <CPSummaryReport></CPSummaryReport>-->
    <VisualInspectionReport></VisualInspectionReport>
    <CustomerWaiveForm></CustomerWaiveForm>
    <ShippingSheet></ShippingSheet>
    <!-- 选择打印机信息 -->
    <a-modal centered
             width="35%"
             :visible="printerVisible"
             title="printer information"
             :okText="$t('menuItem.confirm')"
             :cancelText="$t('menuItem.cancel')"
             @ok="printerOk"
             @cancel="printerCancel">
        <a-row class="yy-Row">
          <!-- 查询条件 -->
          <a-form-model
              layout="inline"
              :model="queryForm"
              :labelCol="{span: 7}"
              :wrapperCol="{span: 16}"
          >
            <a-row>
              <a-col>
                <a-form-model-item :label="$t('menuItem.printerInformation')">
                  <a-select
                      v-model="queryForm.printName"
                      show-search
                      :filter-option="filterOption"
                      allowClear
                      showArrow
                  >
                    <a-select-option v-for="item in printerInformationList" :value="item.dataDesc +':'+ item.ext1" :key="item.dataDesc">
                      {{ item.dataDesc +":"+ item.ext1 }}
                    </a-select-option>
                  </a-select>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model>
        </a-row>
    </a-modal>
  </div>
</template>

<script>
import {mapState, mapMutations} from "vuex";
import WATSummaryReport from "@/views/SEM1000/WATSummaryReport.vue";
import CPSummaryReport from "@/views/SEM1000/CPSummaryReport";
import VisualInspectionReport from "@/views/SEM1000/VisualInspectionReport";
import CustomerWaiveForm from "@/views/SEM1000/CustomerWaiveForm";
import ShippingSheet from "@/views/SEM1000/ShippingSheet";
import MTable from "../../components/MTable";

export default {
  name: 'PackagingSummary',
  components: {MTable, ShippingSheet, CustomerWaiveForm, VisualInspectionReport,},
  data() {
    return {
      columns: [
        {
          title: this.$t('menuItem.UserTableId'),
          dataIndex: "key",
          key: "key",
          width: 80,
          align: 'center'
        },
        {
          title: this.$t('menuItem.LotId'),
          dataIndex: 'lotId',
          key: 'lotId',
          align: 'center',
          width: 150,
          scopedSlots: {customRender: 'lotId'},
        },
        {
          title: this.$t('menuItem.Quantity'),
          dataIndex: 'quantity',
          key: 'quantity',
          align: 'center'
        },
        {
          title: this.$t('menuItem.CarrierId'),
          dataIndex: 'crrId',
          key: 'crrId',
          align: 'center',
        },
        {
          title: this.$t('menuItem.Pri'),
          dataIndex: 'priInt',
          key: 'priInt',
          align: 'center',
        },
        {
          title: this.$t('menuItem.StepStatus'),
          dataIndex: 'stepStatus',
          key: 'stepStatus',
          align: 'center',
        },
        {
          title: this.$t('menuItem.ProductId'),
          dataIndex: 'productName',
          key: 'productName',
          align: 'center',
        },
        {
          title: this.$t('menuItem.Type'),
          dataIndex: 'type',
          key: 'type',
          align: 'center',
        },
        {
          title: this.$t('menuItem.LotState'),
          dataIndex: 'lotState',
          key: 'lotState',
          align: 'center',
          width: 120,
        },
        {
          title: this.$t('menuItem.WaitTime'),
          dataIndex: 'waitTime',
          key: 'waitTime',
          align: 'center',
        },
        {
          title: this.$t('menuItem.Result'),
          dataIndex: 'result',
          key: 'result',
          align: 'center',
          scopedSlots: {customRender: 'result'},
        },
      ],
      columns2: [
        {
          title: this.$t('menuItem.WaferId'),
          dataIndex: "waferId",
          key: "waferId",
          align: 'center'
        },
        {
          title: this.$t('menuItem.Result'),
          dataIndex: 'ymsResult',
          key: 'ymsResult',
          align: 'center',
          scopedSlots: {customRender: 'ymsResult'},
        },
      ],
      labelCol: {span: 7},
      wrapperCol: {span: 12},
      windowHeight: document.documentElement.clientHeight,   //实时屏幕高度
    }
  },
  computed: {
    ...mapState('js1000', ['queryForm', 'dataSource','dataSource2',
      'loadTable', 'capForm','printerVisible','dataPagination','lotList','printerInformationList']),
  },
  methods: {
    ...mapMutations('js1000', ['cleanPackagingSummary','clickCell','queryLotInfo','customRow','setDataPagination','printerOk','printerCancel','queryRetWaferInfo']),
    // 下拉框搜索
    filterOption(input, option) {
      return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    // 设置选中行
    customRowTest(record, index) {
      this.customRow(record)
      this.queryRetWaferInfo(record.lotId)
    },
    tableChange(data) {
      let val = {
        ...this.dataPagination,
        current: data.current,
        pageSize: data.pageSize,
      }
      this.setDataPagination(val)
      // 查询table
      this.queryLotInfo()
    },
    queryClickFunc() {
      let val = {
        ...this.dataPagination,
        current: 1,
      }
      this.setDataPagination(val)
      this.queryLotInfo();
    },
    setTableHeight(){
      let pageSize = parseInt((document.documentElement.clientHeight - 300) / 41)
      this.setDataPagination({
        ...this.dataPagination,
        pageSize: pageSize,
      })
    }
  },
  watch:{
    windowHeight(val){
      this.setTableHeight()
    }
  },
  beforeMount() {
    this.setTableHeight()
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        this.windowHeight = window.fullHeight;
      })();
    };
    this.queryLotInfo();
  },
}
</script>

<style scoped>

.yy-Row {
  margin-bottom: 1rem;
}

</style>
